<template>
	<jf-navigation @getHeight="getNavigationHeight">
		<template #left>
			<view class="search_box">
				<image src="@/static/images/index/search/icon001.png"></image>
				<input type="text" :placeholder="$t('index.search.placeholderSearch')" confirm-type="search" v-model="queryParams.key" @confirm="search()" @focus="focus()" :disabled="data.loading"/>
			</view>
		</template>
	</jf-navigation>
	<template v-if="data.status !== 2">
		<template v-if="data.status === 0">
			<view class="search_title">
				<view class="search_title_text">{{$t('index.search.history')}}</view>
				<view class="search_title_delete" @click="clear()">
					<image src="@/static/images/index/search/icon002.png"></image>
					<view>{{$t('index.search.clear')}}</view>
				</view>
			</view>
			
			<view class="search_historys" :style="{'maxHeight': data.isOpen ? 'unset' : '176rpx'}">
				<view class="search_history_container">
					<view class="search_history" v-for="(item,index) in data.historys" :key="index">
						<view @click="searchValue(item)">{{item}}</view>
						<image src="@/static/images/index/search/icon003.png" @click.stop="remove(index)"></image>
					</view>
				</view>
			</view>
			
			<view class="search_more">
				<template v-if="data.showOpen">
					<view @click="data.isOpen = !data.isOpen">{{$t(data.isOpen ? 'index.search.close' : 'index.search.open')}}</view>
					<image src="@/static/images/locale/arrow.png" :class="{'open': data.isOpen}"></image>
				</template>
				<view class="search_history_none" v-if="data.historys.length === 0">{{$t('index.search.searchNone')}}</view>
			</view>
		</template>
		<view class="search_none" v-if="data.status === 1">
			<image src="@/static/images/index/search/none.png"></image>
			<view>{{$t('index.search.none')}}</view>
		</view>
		
		<view class="search_title" style="padding-top: 18rpx;">
			<view class="search_title_text">{{$t('index.search.hot')}}</view>
		</view>
		
		<view class="search_hot" v-for="(item,index) in data.hots" :key="index" @click="searchValue(item.key)">
			<view class="search_hot_dot" :class="{'active': index < 3}"></view>
			<view class="search_hot_text">{{item.key}}</view>
		</view>
	</template>
	
	<template v-else>
		<jf-falls :list="data.list" :loading="data.loading" :loadEnd="data.loadEnd" :loadError="data.loadError" :total="data.total" :loadNoneText="$t('common.load.none')" :loadEndText="$t('common.load.notMore')" :loadErrorText="$t('common.load.error')" @load="getList()">
			<template #scope="{item}">
				<jf-forum :item="item" type="1"></jf-forum>
			</template>
		</jf-falls>
	</template>
</template>

<script lang="ts" setup>
	import { reactive, onMounted, nextTick, getCurrentInstance } from 'vue';
	import { listArticle, getSearch } from "@/api/article"
	
	const { proxy } = getCurrentInstance()
	const data = reactive({
		navigationHeight: 0,
		historys: uni.getStorageSync("searchHistorys") || [],
		showOpen: false,
		isOpen: false,
		loading: false,
		hots: [],
		status: 0,
		list: [],
		total: 0,
		loadEnd: false,
		loadError: false
	})
	const queryParams = reactive({
		key: "",
		page: 1,
		limit: 10
	})
	
	const getNavigationHeight = ( height:number ):void => {
		data.navigationHeight = height;
	}
	const focus = ():void => {
		data.status = 0
		judgeMore()
	}
	const search = ():void => {
		if(!queryParams.key) return
		const index = data.historys.findIndex(( item: string ) => item === queryParams.key)
		if(index === -1){
			data.historys.unshift(queryParams.key)
		}else{
			data.historys.unshift(data.historys.splice(index,1)[0])
		}
		uni.setStorageSync('searchHistorys', data.historys)
		judgeMore()
		getList(true)
	}
	const searchValue = (value:string):void => {
		if(data.loading) return
		queryParams.key = value
		search()
	}
	const clear = ():void => {
		data.historys = [];
		uni.setStorageSync('searchHistorys', data.historys)
		judgeMore()
	}
	const remove = (index:number):void => {
		data.historys.splice(index,1)
		uni.setStorageSync('searchHistorys', data.historys)
		judgeMore()
	}
	const judgeMore = ():void => {
		setTimeout(()=>{
			const query = uni.createSelectorQuery().in(proxy);
			query.select('.search_history_container').boundingClientRect((result:any) => {
				if(!result) return
				uni.getSystemInfo({
					success: (systemInfo) => {
						if(750 / systemInfo.screenWidth * result.height > 176){
							data.showOpen = true
						}else{
							data.showOpen = false
						}
					}
				})
			}).exec();
		})
	}
	const getList = (init?: boolean):void => {
		if(init){
			queryParams.page = 1
			data.total = 0
			data.list = []
			data.loadEnd = false
			data.loadError = false
			data.loading = false
		}
		if(data.loadEnd || data.loading)return
		data.loading = true
		data.loadEnd = false
		data.loadError = false
		listArticle(queryParams).then( (res:any) =>{
			
			data.total = res.data.count
			data.list = data.list.concat(res.data.list)
			if(data.list.length > 0){
				data.status = 2
			}else{
				data.status = 1
			}
			if(queryParams.page * queryParams.limit > data.total){
				data.loadEnd = true
			}
			queryParams.page += 1
		}).catch(() => {
			data.loadError = true
		}).finally(():void => {
			data.loading = false
		})
	}
	
	onMounted(() => {
		nextTick(() => {
			getSearch().then(res => {
				data.hots = res.data.list
			})
			judgeMore()
		})
	})
</script>

<style lang="scss">
	.search_box{
		width: 100%;
		height: 72rpx;
		background: #F2F4F6;
		border-radius: 36rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		image{
			width: 44rpx;
			height: 44rpx;
			margin-left: 24rpx;
		}
		input{
			flex-grow: 1;
			padding: 0 24rpx 0 12rpx;
			height: 72rpx;
			color: var(--color-primary);
			font-weight: 400;
			font-size: 28rpx;
		}
	}
	.search_title{
		width: 100vw;
		padding: 0 32rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		height: 100rpx;
		.search_title_text{
			font-size: 32rpx;
			font-weight: 500;
			line-height: 36rpx;
		}
		.search_title_delete{
			display: flex;
			flex-direction: row;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 26rpx;
			color: #7C8493;
			image{
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
	}
	.search_historys{
		width: 710rpx;
		max-height: 176rpx;
		margin-left: 32rpx;
		overflow: hidden;
		.search_history_container{
			width: 710rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;
			.search_history{
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 24rpx;
				color: #6B7280;
				font-weight: 400;
				line-height: 64rpx;
				padding: 0 24rpx;
				background: #F2F4F6;
				border-radius: 32rpx;
				margin-right: 24rpx;
				margin-bottom: 24rpx;
				view{
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
				image{
					width: 24rpx;
					height: 24rpx;
					margin-left: 12rpx;
					flex-shrink: 0;
				}
			}
		}
		
	}
	.search_more{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 32rpx;
		padding-top: 8rpx;
		padding-bottom: 32rpx;
		border-bottom: 12rpx solid #F2F4F6;
		image{
			width: 24rpx;
			height: 24rpx;
			margin-left: 4rpx;
			&.open{
				transform: rotate(180deg);
			}
		}
		.search_history_none{
			color: #7C8493;
			padding: 24rpx 0;
		}
	}
	.search_none{
		width: 100%;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-bottom: 12rpx solid #F2F4F6;
		padding-bottom: 30rpx;
		image{
			width: 400rpx;
			height: 300rpx;
			margin-bottom: 12rpx;
		}
		view{
			width: 420rpx;
			font-size: 24rpx;
			color: #6B7280;
			font-weight: 400;
			line-height: 32rpx;
			text-align: center;
		}
	}
	.search_hot{
		width: 686rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2rpx solid #EDEFF3;
		margin-left: 32rpx;
		.search_hot_dot{
			width: 16rpx;
			height: 16rpx;
			border-radius: 8rpx;
			background: #D8D8D8;
			margin-right: 12rpx;
			flex-shrink: 0;
			&.active{
				background: #FC3319;
			}
		}
		.search_hot_text{
			font-size: 32rpx;
			font-weight: 400;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
	}
</style>